<template>
  <wit-content>
    <wit-custom :isBack="true">
      <template v-slot:content>
        <text>grid</text>
      </template>
      <template v-slot:left>
        <text class="icon-weixin font-size-xl"></text>
      </template>
    </wit-custom>
    <view class="content">
      <view>grid 布局</view>
      <wit-grid :span="2">
        <wit-grid-item v-for="i in 4" border :key="i">{{ i }}</wit-grid-item>
      </wit-grid>
      <view>grid 布局 span列数</view>
      <wit-grid :span="4">
        <wit-grid-item v-for="i in 6" border :height="85" :key="i">{{ i }}</wit-grid-item>
      </wit-grid>
      <view>grid 布局 gutter间隔 center水平居中 l-center垂直居中</view>
      <wit-grid :span="3" :gutter="5">
        <wit-grid-item v-for="i in 6" border center l-center :key="i">{{ i }}</wit-grid-item>
      </wit-grid>
      <view>grid 响应式布局 xs sm md lg xl 需要多少个就传多少</view>
      <wit-grid :gutter="4" :xs="3" :sm="4" :md="5" :lg="6" :xl="7">
        <wit-grid-item v-for="i in 10" border center :key="i">
          <image style="height: 100px;width: 100px" mode="aspectFill" src="https://foruda.gitee.com/avatar/1669983286107980056/5246316_taiping520_1669983285.png!avatar100"></image>
          <view>name</view>
        </wit-grid-item>
      </wit-grid>
    </view>
  </wit-content>
</template>